import * as React from 'react';
import Box from '@/commonComponents/box/index';
import dayjs from 'dayjs';
import { Link } from 'react-router-dom';
import TrainContext from '../../context';

import './index.module.scss';
const { memo, useMemo, useContext } = React;

export interface ChannelProps {
  data?: number[];
  isLoading?: boolean;
  name: string;
  desc: string;
  type: string;
}

function Channel(props: ChannelProps) {
  // const { data } = props;
  const { name, desc, type } = props;
  const { trainNumber, departStation, arriveStation, departDate, time, dTime, aTime } = useContext(TrainContext);

  const src = useMemo(() => {
    return `/order?trainNumber=${trainNumber}&dStation=${departStation}&aStation=${arriveStation}&type=${type}&date=${dayjs(
      departDate
    ).format('YYYY-MM-DD')}&time=${time}&dTime=${dTime}&aTime=${aTime}`;
  }, [type, trainNumber, departStation, arriveStation, departDate]);
  return (
    <Box data={[1]} isLoading={false} styleName="Channel-box">
      <div styleName="channel">
        <div styleName="middle">
          <div styleName="name">{name}</div>
          <div styleName="desc">{desc}</div>
        </div>
        <Link to={src} styleName="buy-wrapper">
          <div styleName="buy">买票</div>
        </Link>
      </div>
    </Box>
  );
}

export default memo(Channel);
